import { View } from "@tarojs/components";
import { useState, useDeferredValue } from "react";

import ByCell from "../ui/ByCell";
import FormInput from "../common/FormInput";
import PopupContainer from "./PopupContainer";
import ByButton from "@/components/ui/ByButton";

type PopupRejectedEvent = {
  onCancel: () => void;
};

export default ({
  loading,
  onConfirm,
  onCancel,
}: PopupRejectedEvent & {
  loading?: boolean;
  onConfirm: (value: string) => void;
}) => {
  const [input, setInput] = useState("");

  const defferValue = useDeferredValue(input);

  return (
    <PopupContainer title="审批驳回" onCancel={onCancel}>
      <View className="px-4">
        <View className="font-bold py-3 border-b-1 border-line-light">
          您确定驳回本次申请？
        </View>

        <View className="mt-2">
          <ByCell label="驳回原因" requierd vertical>
            <FormInput
              type="textarea"
              value={input}
              placeholder="请输入"
              onChange={setInput}
            />
          </ByCell>
        </View>

        <ByButton
          size="large"
          loading={loading}
          className="w-2/3 mt-6 mb-3"
          disabled={!defferValue.trim()}
          onClick={() => onConfirm(input)}
        >
          提交
        </ByButton>
        <View className="safe-footer" />
      </View>
    </PopupContainer>
  );
};
